<!DOCTYPE html>
<html lang="en">
  <head>
  <style type="text/css">
  .thumbnail img { height:50px; width:auto; }
  
  </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../favicon.png">

    <title>Online Shopping</title>

    <!-- Bootstrap core CSS -->
    <link href="admin/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="admin/jumbotron.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html#">Kharidaree</a>
        </div>
        <div class="navbar-collapse collapse">
         <a href='#' class='pull-right btn btn-primary'>Customer Login</a>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a>
        <a href='admin/signup.php' class="btn btn-success btn-lg" role="button" target='_blank'>Sign Up here! &raquo;</a>
        </p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
      <?php 
      	mysql_connect("localhost","root","");
      	mysql_select_db("abade");
      	$mysql=mysql_query("SELECT * FROM items order by id desc limit 3");
      while($row=mysql_fetch_object($mysql)){
      ?>
		<div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="admin/photo/<?php echo $row->photo;?>" height="200px">
		      <div class="caption">
		        <h3><?php echo $row->name;?></h3>
		        <ul>
		        	<li><?php echo $row->category;?></li>
		        	<li><?php echo $row->size;?></li>
		        	<li><?php echo $row->price;?></li>
		        </ul>
		        <p><a href="#" class="btn btn-primary" role="button">Buy</a> <a href="#" class="btn btn-primary" role="button">Details</a>
		      </div>
		    </div>
		  </div>
	<?php 
      }
	?>
      </div>
      
      <div class='row'>
      	<?php 
      		$cat=mysql_query("SELECT distinct category from items");
      		echo "<ul class='list-inline'>";
      		while($cat_row=mysql_fetch_array($cat)){
      			echo "<li><a href='category.php?cat=$cat_row[category]' class='btn btn-warning'>" . $cat_row['category'] . "</a></li>";
      			
      		}
      	?>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="admin/js/bootstrap.min.js"></script>
  </body>
</html>

